import ajaxFn from "./ajax";
import "./yu.css";

// 发送请求, 实现动态渲染图片
ajaxFn({
  baseUrl: "http://114.132.122.73:7001",
  url: "/api/web/carouselGroup/get",
  method: "GET",
  data: {
    projectId: 24,
    carouselGroupId: 63,
  },
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_carousels;
      console.log(carousels);
      // 初始化轮播图
      init(carousels);
      // 执行轮播图操作
      eventFn();
    } else {
      console.log("出现了其他问题");
    }
  },
});

// 初始化渲染
function init(data) {
  let ul = document.querySelector(".img-box > ul");
  let dotBox = document.querySelector(".dot-box");

  // innerHTML
  let liHTML = "";
  let spanHTML = "";
  data.forEach((item) => {
    liHTML += `<li><img src="${item.url}" /></li>`;
    spanHTML += `<span></span>`;
  });
  // 一次性写入
  ul.innerHTML = liHTML;
  dotBox.innerHTML = spanHTML;
  // 添加激活类名 (第一个元素)
  ul.firstElementChild.classList.add("li-active");
  dotBox.firstElementChild.classList.add("dot-active");
}

//轮播图操作
function eventFn() {
  let dots = document.querySelectorAll(".dot-box > span");
  let ul = document.querySelector(".img-box > ul");
  let list = document.querySelectorAll(".img-box > ul > li");
  let box = document.querySelector(".img-box");

  // 克隆第一张和最后一张 (无缝切换)
  // 1. 把最后一张克隆到第一张 cloneNode(true)
  ul.insertBefore(ul.lastElementChild.cloneNode(true), ul.firstElementChild);
  // 2. 把第二张克隆到最后一张 cloneNode(true)
  ul.appendChild(ul.children[1].cloneNode(true));
  // 位置移动到第二张 (克隆完成之后, 第二张才是真正的第一张)
  ul.style.transform = "translateX(-100%)";
  // 遇到了问题: 加载js的时候会出现过度效果
  // 如何解决 --- 先移动, 然后再恢复过度效果 (延时执行)
  setTimeout(() => {
    ul.style.transition = `transform 1s`;
  }, 100);

  // 需要控制的值, 标记数值 (初始值)
  let index = 1;
  // 保存上一次操作的值 (移除类名)
  let lastIndex = 1;

  // 下一张函数
  function arrowRightFn() {
    // console.log('下一张函数');
    ul.style.transform = `translateX(-${++index}00%)`;
    // 判断是否到达最后一张, 立马跳到第二张 (等到过度效果结束之后才能跳转)
    if (index > list.length) {
      index = 1;
      // 等待过度效果结束 (transitionend 事件)
      ul.addEventListener(
        "transitionend",
        () => {
          // console.log('完成过度');
          // 关闭过渡效果
          ul.style.transition = `none`;
          // 回到第二张的位置
          ul.style.transform = `translateX(-${index}00%)`;
          // 重置 (更新元素的新样式)
          window.getComputedStyle(ul).transform;

          // 恢复动画
          ul.style.transition = `transform 1s`;
        },
        {
          // 绑定一次事件
          once: true,
        }
      );
    }
    dotsColor();
  }
  // 上一张函数
  function arrowLeftFn() {
    // console.log('上一张函数');
    ul.style.transform = `translateX(-${--index}00%)`;
    // 判断index是否到达第一张 (最后一张的克隆体)
    if (index < 1) {
      // list 的长度克隆之后的还是克隆前的?
      // index = list.length;
      index = ul.children.length - 2;

      // 等待过度效果结束 (transitionend 事件)
      ul.addEventListener(
        "transitionend",
        () => {
          // console.log('完成过度');
          // 关闭过渡效果
          ul.style.transition = `none`;
          // 回到第二张的位置
          ul.style.transform = `translateX(-${index}00%)`;
          // 重置 (更新元素的新样式)
          window.getComputedStyle(ul).transform;

          // 恢复动画
          ul.style.transition = `transform 1s`;
        },
        {
          // 绑定一次事件
          once: true,
        }
      );
    }
    dotsColor();
  }

  // 小圆点颜色函数
  function dotsColor() {
    // console.log('lastIndex', lastIndex - 1);
    // console.log('index', index - 1);
    dots[lastIndex - 1].classList.remove("dot-active");
    dots[index - 1].classList.add("dot-active");
    // 操作完成之后再保留操作值index
    lastIndex = index;
  }

  // 给小圆点绑定点击事件
  dots.forEach((el, elIndex) => {
    el.addEventListener("click", () => {
      // 当前小圆点控制轮播图位置, 需要重置index
      index = elIndex + 1;
      ul.style.transform = `translateX(-${index}00%)`;
      // 小圆点激活类函数
      dotsColor();
    });
  });

  // 自动轮播
  // 自动轮播
  autoPlay();
  function autoPlay() {
    // 停止上一个定时器任务 (解决切换屏幕的bug)
    // clearInterval(timer);
    timer = setInterval(() => {
      // 下一张函数
      arrowRightFn();
    }, 2000);
  }

  // 停止自动轮播 (鼠标移入轮播图范围之内)
  box.addEventListener("mouseenter", () => {
    clearInterval(timer);
  });

  // 继续开始轮播 (鼠标移出轮播图范围)
  box.addEventListener("mouseleave", () => {
    autoPlay();
  });

  // visibilityChange 功能: 浏览器标签页被隐藏/显示的时候触发该事件

  document.addEventListener("visibilitychange", () => {
    // document.hidden 检测文档是否为隐藏
    // document.visibilityState

    // console.log('hidden', document.hidden);
    // console.log('visibilityState', document.visibilityState);

    if (document.hidden) {
      clearInterval(timer);
      // console.log('隐藏');
    } else {
      autoPlay();
      // console.log('显示');
    }
  });
}

// 自然
ajaxFn({
  baseUrl: "http://127.0.0.1:7001",
  url: "/api/web/classify/getById",
  method: "GET",
  data: {
    id: 12,
    projectId: 60,
  },
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_cases;
      console.log(carousels);
      inits(carousels);
    } else {
      console.log("出现了其他问题");
    }
  },
});

// 自然初始化渲染
function inits(data) {
  let natureImg = document.querySelector(".natureImg");
  let dotSpan = document.querySelector(".dotSpan");

  // innerHTML
  let innerNature = "";
  let innerDotSpan = "";
  data.forEach((item, index) => {
    // innerDotSpan += (Math.ceil(index % 4) === 0) ? `<span></span>` : "";
    innerDotSpan += ``;
    innerNature += `
        <div>
          <div><img data-src="${item.cover}" alt="" class="lazy"></div>
            <div>
              <p>${item.name}</p>
              <p>设备：其他</p>
              <p>${item.content}</p>
              <div>
                  <p>大白啦！</p>
                  <p>2020年11月6日</p>
              </div>              
            </div>
          </div>
        `;
  });
  // 一次性写入
  natureImg.innerHTML = innerNature;
  // dotSpan.innerHTML = innerDotSpan;

  // 添加激活类名 (第一个元素)
  dotSpan.firstElementChild.classList.add("dots-active");
  //     dotBox.firstElementChild.classList.add('dot-active');
}

// 点击轮播
fn1();
function fn1() {
  let span = document.querySelectorAll(".dotSpan> span");
  console.log(span);
  let natureImg = document.querySelector(".natureImg");
  console.log(natureImg);
  let index = 0;

  let lsatIdex = 0;
  span.forEach((el, elIedx) => {
    el.addEventListener("click", () => {
      console.log(123);
      index = elIedx;
      natureImg.style.transform = `translateX(-${index}00%)`;
      fn2();
    });
  });

  // 小圆点颜色
  function fn2() {
    span[lsatIdex].classList.remove("dots-active");
    span[index].classList.add("dots-active");
    lsatIdex = index;
  }
}
// 热门标签
// 发送请求, 实现动态渲染图片
ajaxFn({
  baseUrl: "http://127.0.0.1:7001",
  url: "/api/web/classify/getById",
  method: "GET",
  data: {
    id: 60,
    projectId: 19,
  },
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_cases;
      console.log(carousels);
      zhirang(carousels);
    } else {
      console.log("出现了其他问题");
    }
  },
});

// 热门标签初始化渲染
function zhirang(datas) {
  let remeng = document.querySelector(".remeng");
  console.log(remeng);

  // innerHTML
  let innerEnmeng = "";
  // let innerDotSpan ="";
  datas.forEach((item, index) => {
    // innerDotSpan += (Math.ceil(index % 4) === 0) ? `<span></span>` : "";
    // innerDotSpan += ``
    innerEnmeng += `
      <div>
          <div><img data-src="${item.cover}" class="le"  alt=""></div>
          <div><p>${item.name}</p></div>
      </div>
      `;
  });
  // 一次性写入
  remeng.innerHTML = innerEnmeng;
}
fn3();
function fn3() {
  let dot = document.querySelectorAll(".dotYd>div");
  console.log(dot);
  let remeng = document.querySelector(".remeng");
  console.log(remeng);
  let index = 0;

  let lsatIdex = 0;
  dot.forEach((el, elIedx) => {
    el.addEventListener("click", () => {
      console.log(123);
      index = elIedx;
      remeng.style.transform = `translateX(-${index}00%)`;
      fn4();
    });
  });

  // 小圆点颜色
  function fn4() {
    dot[lsatIdex].classList.remove("dot");
    dot[index].classList.add("dot");
    lsatIdex = index;
  }
}

// 城市
ajaxFn({
  baseUrl: "http://127.0.0.1:7001",
  url: "/api/web/classify/getById",
  method: "GET",
  data: {
    id: 41,
    projectId: 19,
  },
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_cases;
      console.log(carousels);
      chengshi(carousels);
    } else {
      console.log("出现了其他问题");
    }
  },
});

// 初始化渲染
function chengshi(da) {
  let chengshi = document.querySelector(".chengshi");
  console.log(chengshi);

  // innerHTML
  let innerCs = "";
  // let innerDotSpan ="";
  da.forEach((item, index) => {
    // innerDotSpan += (Math.ceil(index % 4) === 0) ? `<span></span>` : "";
    // innerDotSpan += ``
    innerCs += `
      <div>
          <div><img data-src="${item.cover}" class="yu" alt=""></div>
            <div>
              <p>${item.name}</p>
              <p>设备：其他</p>
              <p>${item.content}</p>
              <div>
                  <p>大白啦！</p>
                  <p>2020年11月6日</p>
              </div>              
            </div>
          </div>
      `;
  });
  // 一次性写入
  chengshi.innerHTML = innerCs;
}
fn5();
function fn5() {
  let dots = document.querySelectorAll(".dotss>div");
  console.log(dots);
  let chengshi = document.querySelector(".chengshi");
  console.log(chengshi);
  let index = 0;

  let lsatIdex = 0;
  dots.forEach((el, elIedxs) => {
    el.addEventListener("click", () => {
      console.log(123);
      index = elIedxs;
      chengshi.style.transform = `translateX(-${index}00%)`;
      fn6();
    });
  });

  // 小圆点颜色
  function fn6() {
    dots[lsatIdex].classList.remove("dots");
    dots[index].classList.add("dots");
    lsatIdex = index;
  }
}
//懒加载

function lazyImg() {
  let imglist = document.querySelectorAll(".lazy");
  let list = document.querySelector(".natureImg");
  // console.log(imglist);
  // console.log(list1)
  // console.log(list1.offsetTop)

  imglist.forEach((el) => {
    // console.log(document.documentElement.clientHeight )
    // console.log(document.documentElement.scrollTop)

    if (
      document.documentElement.clientHeight +
        document.documentElement.scrollTop >
      list.offsetTop
    ) {
      el.classList.remove("lazy");
      el.src = el.dataset.src;
    }
  });
}
// document.onscroll= lazyImg

function yu() {
  let imglist = document.querySelectorAll(".yu");
  let list = document.querySelector(".chengshi");
  // console.log(imglist);
  // console.log(list)
  // console.log(list.offsetTop)

  imglist.forEach((el) => {
    // console.log(document.documentElement.clientHeight )
    // console.log(document.documentElement.scrollTop)

    if (
      document.documentElement.clientHeight +
        document.documentElement.scrollTop >
      list.offsetTop
    ) {
      el.classList.remove("yu");
      el.src = el.dataset.src;
    }
  });
}
function le() {
  let imglist = document.querySelectorAll(".le");
  let list = document.querySelector(".remeng");
  // console.log(imglist);
  // console.log(list)
  // console.log(list.offsetTop)

  imglist.forEach((el) => {
    // console.log(document.documentElement.clientHeight )
    // console.log(document.documentElement.scrollTop)

    if (
      document.documentElement.clientHeight +
        document.documentElement.scrollTop >
      list.offsetTop
    ) {
      el.classList.remove("le");
      el.src = el.dataset.src;
    }
  });
}
document.onscroll = () => {
  yu();
  lazyImg();
  le();
};

